<template>
    <div>
        <div>
            搜索用户：<el-input class="searchInp" v-model="searchStr" placeholder="搜索用户" clearable
                @input="searchUser"></el-input>
        </div>
        <el-table :data="showList" border style="width: 100%">
            <el-table-column label="用户名" prop="username" align="center">
            </el-table-column>
            <el-table-column label="年龄" prop="age" align="center">
            </el-table-column>
            <el-table-column label="性别" prop="gender" align="center">
            </el-table-column>
            <el-table-column label="昵称" prop="nickname" align="center">
            </el-table-column>
            <el-table-column label="角色" prop="role" align="center">
            </el-table-column>
            <el-table-column align="center" prop="flag">
                <template slot="header">
                    冻结账号
                </template>
                <template slot-scope="scope">
                    <el-button v-if="scope.row.flag" size="mini" type="warning"
                        @click="freezeUser(scope.row.id)">冻结</el-button>
                    <el-button v-else size="mini" type="success" @click="thawUser(scope.row.id)">解冻</el-button>
                </template>
            </el-table-column>
            <el-table-column align="center" width="200px">
                <template slot="header">
                    操作
                </template>
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="resetPassword(scope.row.id)">重置密码</el-button>
                    <el-button size="mini" type="danger" @click="deleteUser(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination :page-size="5" :current-page="1" @current-change="curPageChange"
            layout="total, prev, pager, next, jumper" :total="list.length">
        </el-pagination>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            list: [],
            searchStr: '',
            curPage: 1,
            searchFlag: false,
        }
    },
    methods: {
        curPageChange(newVal) {
            this.curPage = newVal;
        },
        resetPassword(uid) {
            let user = this.list.find(e => e.id == uid);
            if (!confirm('确定要重置用户' + user.nickname + '的密码吗？')) return;
            axios.post('/users/backend/reset', { uid })
                .then(({ data: { code } }) => {
                    if (code == 1) alert('重置密码成功！');
                    else alert('重置密码失败');
                })
        },
        deleteUser(uid) {
            let user = this.list.find(e => e.id == uid);
            if (!confirm('确定要删除用户' + user.nickname + '吗？')) return;
            axios.post('/users/backend/del', { uid })
                .then(({ data: { code } }) => {
                    if (code != 1) return alert('删除失败！');
                    this.list = this.list.filter(e => e.id != uid);
                })
        },
        freezeUser(uid) {
            let user = this.list.find(e => e.id == uid);
            if (!confirm('确定要冻结用户' + user.nickname + '吗？')) return;
            axios.post('/users/backend/flag', { uid })
                .then(({ data: { code } }) => {
                    if (code != 1) return alert('冻结失败！');
                    user.flag = false;
                })
        },
        thawUser(uid) {
            let user = this.list.find(e => e.id == uid);
            axios.post('/users/backend/flag', { uid })
                .then(({ data: { code } }) => {
                    if (code != 1) return alert('解冻失败！');
                    user.flag = true;
                })
        },
        searchUser() {
            if (this.searchFlag) return;
            this.searchFlag = true;
            setTimeout(() => {
                axios.get('/users/backend/search', { params: { searchStr: this.searchStr.trim() }})
                    .then(({ data: { code, list } }) => {
                        if (code != 1) return alert('搜索失败');
                        this.list = list;
                    })
                this.searchFlag = false;
            }, 500)
        }
    },
    computed: {
        showList() {
            let l = (this.curPage - 1) * 5;
            let r = l + 5 > this.list.length ? this.list.length : l + 5;
            return this.list.slice(l, r);
        }
    },
    created() {
        axios.get('/users/backend/list')
            .then(({ data: { code, list } }) => {
                if (code != 1) return alert('获取用户信息失败');
                this.list = list;
            })
    }
}

</script>

<style scoped>
.searchInp {
    width: 200px;
    margin-bottom: 20px;
}

span {
    margin-left: 10px;
}
</style>